<template>
  <GenericTableManager
    title="菜单管理"
    :show-search="false"
    :show-pagination="false"
    @add="handleAdd"
    @edit="handleEdit"
    @delete="handleDelete"
    @refresh="handleRefresh"
    @submit="handleSubmit"
    ref="tableManagerRef"
  >
    <!-- 操作按钮插槽 -->
    <template #actions="{ handleAdd, handleRefresh, loading }">
      <el-button type="primary" :icon="Plus" @click="handleAdd">新增菜单</el-button>
      <el-button type="success" :icon="Refresh" @click="handleRefresh" :loading="loading">刷新</el-button>
    </template>

    <!-- 表格列插槽 -->
    <template #columns="{ tableData, handleEdit, handleDelete }">
      <el-table-column prop="title" label="菜单名称" width="200" />
      <el-table-column prop="icon" label="图标" width="80" align="center">
        <template #default="{ row }">
          <el-icon v-if="row.icon">
            <component :is="row.icon" />
          </el-icon>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="path" label="路由地址" width="200" />
      <el-table-column prop="component" label="组件路径" width="200" />
      <el-table-column prop="sort" label="排序" width="80" align="center" />
      <el-table-column prop="status" label="状态" width="80" align="center">
        <template #default="{ row }">
          <el-tag :type="row.status === '0' ? 'success' : 'danger'">
            {{ row.status === '0' ? '正常' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="160" />
      <el-table-column label="操作" width="200" fixed="right">
        <template #default="{ row }">
          <el-button type="primary" size="small" :icon="Edit" @click="handleEdit(row)">编辑</el-button>
          <el-button type="success" size="small" :icon="Plus" @click="handleAddChild(row)">新增子菜单</el-button>
          <el-button type="danger" size="small" :icon="Delete" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </template>

    <!-- 表单插槽 -->
    <template #form="{ formData, formRules, formRef, isEdit, loading }">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="上级菜单" prop="parentId">
          <el-tree-select
            v-model="formData.parentId"
            :data="menuOptions"
            :props="{ value: 'id', label: 'title', children: 'children' }"
            placeholder="请选择上级菜单"
            style="width: 100%"
            check-strictly
          />
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="formData.menuType">
            <el-radio label="M">目录</el-radio>
            <el-radio label="C">菜单</el-radio>
            <el-radio label="F">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="formData.title" placeholder="请输入菜单名称" />
        </el-form-item>
        <el-form-item label="路由地址" prop="path">
          <el-input v-model="formData.path" placeholder="请输入路由地址" />
        </el-form-item>
        <el-form-item label="组件路径" prop="component">
          <el-input v-model="formData.component" placeholder="请输入组件路径" />
        </el-form-item>
        <el-form-item label="菜单图标" prop="icon">
          <el-input v-model="formData.icon" placeholder="请输入图标名称" />
        </el-form-item>
        <el-form-item label="显示排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="0" style="width: 100%" />
        </el-form-item>
        <el-form-item label="是否外链" prop="isFrame">
          <el-radio-group v-model="formData.isFrame">
            <el-radio :label="0">是</el-radio>
            <el-radio :label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="是否缓存" prop="isCache">
          <el-radio-group v-model="formData.isCache">
            <el-radio :label="0">缓存</el-radio>
            <el-radio :label="1">不缓存</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="显示状态" prop="visible">
          <el-radio-group v-model="formData.visible">
            <el-radio label="0">显示</el-radio>
            <el-radio label="1">隐藏</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限标识" prop="perms">
          <el-input v-model="formData.perms" placeholder="请输入权限标识" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
            v-model="formData.remark"
            type="textarea"
            :rows="3"
            placeholder="请输入备注"
          />
        </el-form-item>
      </el-form>
    </template>
  </GenericTableManager>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Edit, Delete, Refresh } from '@element-plus/icons-vue'
import GenericTableManager from '@/components/GenericTableManager.vue'
import { useMenuTableManager } from '@/composables/useTableManager'
import { businessValidationRules } from '@/utils/commonValidation'
import { menuApiManager } from '@/api/common'
import type { MenuItem } from '@/types/menu'

// 使用通用表格管理
const {
  tableData,
  loading,
  handleAdd,
  handleEdit,
  handleDelete,
  handleSubmit,
  handleRefresh,
  setFormRules,
  setTableData
} = useMenuTableManager()

// 表格管理器引用
const tableManagerRef = ref()

// 菜单选项
const menuOptions = ref<any[]>([])

// 设置表单验证规则
const formRules = businessValidationRules.menu.form()

// 初始化
onMounted(async () => {
  setFormRules(formRules)
  await loadMenuData()
  await loadMenuOptions()
})

// 加载菜单数据
const loadMenuData = async () => {
  try {
    // 模拟数据
    const mockData = [
      {
        id: 1,
        parentId: 0,
        name: 'system',
        title: '系统管理',
        icon: 'Setting',
        path: '/system',
        component: 'Layout',
        sort: 1,
        status: '0',
        createTime: '2024-01-01 00:00:00',
        children: [
          {
            id: 11,
            parentId: 1,
            name: 'user',
            title: '用户管理',
            icon: 'User',
            path: '/system/user',
            component: 'system/user/index',
            sort: 1,
            status: '0',
            createTime: '2024-01-01 00:00:00'
          },
          {
            id: 12,
            parentId: 1,
            name: 'role',
            title: '角色管理',
            icon: 'UserFilled',
            path: '/system/role',
            component: 'system/role/index',
            sort: 2,
            status: '0',
            createTime: '2024-01-01 00:00:00'
          },
          {
            id: 13,
            parentId: 1,
            name: 'menu',
            title: '菜单管理',
            icon: 'Menu',
            path: '/system/menu',
            component: 'system/menu/index',
            sort: 3,
            status: '0',
            createTime: '2024-01-01 00:00:00'
          }
        ]
      },
      {
        id: 2,
        parentId: 0,
        name: 'monitor',
        title: '系统监控',
        icon: 'Monitor',
        path: '/monitor',
        component: 'Layout',
        sort: 2,
        status: '0',
        createTime: '2024-01-01 00:00:00',
        children: [
          {
            id: 21,
            parentId: 2,
            name: 'online',
            title: '在线用户',
            icon: 'User',
            path: '/monitor/online',
            component: 'monitor/online/index',
            sort: 1,
            status: '0',
            createTime: '2024-01-01 00:00:00'
          }
        ]
      }
    ]
    
    setTableData(mockData)
  } catch (error) {
    ElMessage.error('获取菜单列表失败')
  }
}

// 加载菜单选项
const loadMenuOptions = async () => {
  try {
    // 模拟获取菜单选项
    menuOptions.value = [
      { id: 0, title: '顶级菜单', children: [] }
    ]
  } catch (error) {
    ElMessage.error('获取菜单选项失败')
  }
}

// 新增子菜单
const handleAddChild = (row: MenuItem) => {
  // 设置父级菜单ID
  const formData = { parentId: row.id }
  handleAdd()
  // 这里需要设置表单数据，可以通过表格管理器的引用来实现
}
</script>

<style lang="scss" scoped>
.menu-management {
  .table-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
  }

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
  }

  .table-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }

  .table-actions {
    display: flex;
    gap: 8px;
  }
}
</style>
